<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Destroy all frames</title>

    <script type="text/javascript">
    //<![CDATA[
        function catchEvent(eventObj, event, eventHandler) {
            if (eventObj.addEventListener) {
                eventObj.addEventListener(event, eventHandler, false);
            }
            else if (event.attachEvent) {
                event = "on" + event;
                eventObj.attachEvent(event, eventHandler);
            }
        }

        catchEvent(window, "load", function() {
            catchEvent(document.forms[0], "click", colorChange);
        });

        function colorChange() {
            var colors = document.forms[0].color;
            var result = document.getElementById('result');
            for(var i=0; i<colors.length; i++) {
                if(colors[0].checked) {
                    var myFrame = document.getElementById('myFrame');
                    var temp = "example9.8.php?color="+colors[i].value;
                    myFrame.contentWindow.location.href="example9.8.php?color="+colors[i].value;
                    myFrame.onload=function() {
                        result.innerHTML=myFrame.contentWindow.document.getElementById("val2").innerHTML;
                    }
                }
            }
        }
    

    //]]>

    </script>
    
</head>
<body>
    <div>
        <form action="">
            <p>
                <input type="radio" name="color" value="red"/> Red <br />
                <input type="radio" name="color" value="blue" /> Blue <br />
            </p>
        </form>
    </div>
    <iframe name="myFrame" id="myFrame" style="width:0; height:0; border:0" src="example9.8.php" ></iframe>
    <div id="result"></div>
</body>
</html>
